<template>
	<div>
		<div class="filter flex flex-y flex-between">
			<div class="flex flex-y">
				<div class="item" style="margin-right: 20px;">
					<label>班级</label>
					<el-select 
						v-model="value_class" 
						placeholder="请选择班级"
						size="small"
						style="width:160px"
						@change="list()"
						clearable>
						<el-option
							v-for="item in list_class"
							:key="item.class_id"
							:label="item.class_name"
							:value="item.class_id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div>
				<el-button type="primary" size="small" @click="SHOW_newStudent = !SHOW_newStudent">新增</el-button>
			</div>
		</div>
		<el-table
			v-loading="loading"
			:data="formData"
			style="width: 100%">
			<el-table-column
				prop="student_name"
				label="姓名">
			</el-table-column>
			<el-table-column
				prop="sex"
				label="性别">
			</el-table-column>
			<el-table-column
				prop="class_name"
				label="班级">
			</el-table-column>
			</el-table-column>
		</el-table>
		<!-- 新增 -->
		<newStudent :ifShow="SHOW_newStudent" @submit="list"></newStudent>
	</div>
</template>

<script>
import newStudent from './components/new'
export default {
	components:{
		newStudent
	},
	data () {
		return {
			loading:false,
			value_class:"",
			list_class:[],
			formData:[],
			SHOW_newStudent:false,
		}
	},
	methods:{
		list(){
			this.loading = true;
			this.$axios.get('/student/list',{
				params:{
					classId:this.value_class
				}
			})
			.then(res=>{
				this.loading = false;
				if(res.code == 200){
					this.formData = res.data;
				}
			})
		},
		getClass(){
			this.$axios.get('/class/list')
			.then(res=>{
				if(res.code == 200){
					this.list_class = res.data;
				}
			})
		},
	},
	mounted(){
		this.list();
		this.getClass();
	}
}
</script>

<style lang="scss" scoped>
	.filter{
		padding-bottom: 30px;
		label{
			color: #666;
			margin-right: 6px;
		}
	}
</style>